import React, {Component} from 'react';
import './App.css';
import BasicComponent from "./BasicComponent";
import PreventingTransitionsExample from "./PreventingTransitionsExample";
import NoMatchExample from "./NoMatchExample";
import RecursiveExample from "./RecursiveExample";
import RouteConfigExample from "./RouteConfigExample";

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            showIndex: 4
        };
        this.changeShowIndex = this.changeShowIndex.bind(this);
    }

    changeShowIndex = () => {
        switch (this.state.showIndex) {
            case 0:
                return <BasicComponent/>;
            case 1:
                return <PreventingTransitionsExample/>;

            case 2:
                return <NoMatchExample/>;
            case 3:
                return <RecursiveExample/>;

            case 4:
                return <RouteConfigExample/>

            default:
                return <div>无匹配</div>;
        }

    };

    render() {
        return (
            <div>
                {
                    this.changeShowIndex()
                }
            </div>

        );
    }
}

export default App;
